<template>
  <div>
    <ZWDrawer ref="zwRef" @close="close">
      <div class="content">
        <div class="alert">请根据，将以下推送地址以及您需要的字段参数，配置到对应第三方平台即可正常推送线索数据</div>
        <div class="alert" style="margin-bottom: 0px">推送地址：{{ url }}<el-button style="margin-left: 10px" @click="down(url)">复制</el-button></div>
        <ZwTable ref="tableRef" class="table-box" :option="tableOption" :fetch-params="state.searchParams" :fetch-api="fetch()"> </ZwTable>
      </div>
    </ZWDrawer>
  </div>
</template>
<script lang="tsx" setup>
  import { ref, reactive, watch } from 'vue'
  import { ElMessage, ElButton } from 'element-plus'
  import useClipboard from 'vue-clipboard3'
  import ZwTable from '@/components/zw/table/Table'
  import ZWDrawer from '@/components/ZWDrawer.vue'
  import { clubSetting, sendurlData } from '@/api/customer/clubManage/commonSea'
  import { deepCopy } from '@/utils/helper'
  const { toClipboard } = useClipboard()
  const emit = defineEmits(['close'])
  const zwRef = ref(null)
  const props = defineProps(['isopen', 'rowid', 'title'])
  const tableRef = ref<HTMLElement | null>(null)
  const defaultParams = { is_enable: 1 }
  const isopen = ref(false)
  const url = ref('')
  const state = reactive({
    searchParams: deepCopy(defaultParams)
  })
  let tableOption = [
    {
      type: 'index',
      width: 55,
      fixed: 'left'
    },
    {
      prop: 'name',
      label: '字段名称'
    },
    {
      prop: 'system_code',
      label: '字段参数'
    },
    {
      prop: 'is_required',
      label: '是否必填',
      render({ row }) {
        return <p>{row.is_required == 2 ? '必填' : '非必填'}</p>
      }
    },
    {
      label: '字段类型',
      prop: 'field_type'
    },
    {
      label: '字段值',
      prop: 'attr_val_name',
      render({ row }) {
        return <p>{row.attr_val_name ? row.attr_val_name : '--'}</p>
      }
    },
    {
      label: '限制',
      prop: 'max_length',
      render({ row }) {
        return <p>{row.type == 'textarea'|| row.type == 'textbox'? row.max_length == 0 ? '不限制' : row.max_length+'个字符' : '--'}</p>
      }
    },
    {
      prop: 'operate',
      label: '操作',
      fixed: 'right',
      isOperate: true,
      option: [
        {
          id: 0,
          name: '复制参数',
          click: (row) => {
            down(row.system_code)
          }
        }
      ]
    }
  ]

  const fetch = async () => {
    // 获取文件列表
    return clubSetting
  }
  const close = () => {
    emit('close')
  }
  const geturl = () => {
    sendurlData({ id: props.rowid }).then((res) => {
      url.value = res.url
    })
  }
  const down = async (val: any) => {
    try {
      await toClipboard(val)
      ElMessage.success('复制成功')
    } catch (e) {
      ElMessage.error('复制失败')
    }
  }
  watch(
    () => props.isopen,
    (val) => {
      if (val) {
        geturl()
        isopen.value = val
        zwRef.value.drawer = true
        zwRef.value.isShow = false
        zwRef.value.title = props.title
        zwRef.value.width = '60%'
      }
    }
  )
</script>
<style scoped lang="scss">
  .content {
    padding: 16px 0;
    .alert {
      margin-bottom: 16px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #33302d;
      line-height: 20px;
    }
  }
</style>
